<template>
  <div class="createemployee">
    <!-- 标题 -->
    <h3>编辑员工信息</h3>
    <div class="box01">
      <span>员工基本信息</span>
      <span>注：带有“*”必填项</span>
    </div>
    <hr />
    <div class="box02">
      <!-- 姓名 工号 -->
      <div>
        <span>员工姓名：</span>
        <input type="text" v-model="useinfo.name" />
      </div>
      <div>
        <span>员工工号：</span>
        <input type="number" v-model="useinfo.num" />
      </div>
      <!-- 联系方式 -->
      <div>
        <span>手机号码：</span>
        <input type="number" v-model="useinfo.phone" />
      </div>

      <div>
        <span>邮箱：</span>
        <input type="text" v-model="useinfo.email" />
      </div>
      <!-- 员工状态 -->
      <div>
        <span>员工状态：</span>
        <input type="text" v-model="useinfo.sex" />
      </div>
      <!-- 分配 -->
      <div>
        <span>分配状态：</span>
        <input type="text" v-model="useinfo.sex1" />
      </div>
      <!-- 地址 -->
      <div>
        <span>地址：</span>
        <input type="text" v-model="useinfo.address" />
      </div>
    </div>
    <!-- 按钮 -->
    <div class="box03">
      <el-button type="primary" @click.prevent="modify" round>确认</el-button>
      <el-button
        type="info"
        @click.prevent="
          router.push('/index/home/zqq/employees/searchemployees')
        "
        round
        >取消</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
//姓名，工号
import axios from "axios";
var router = useRouter();
var route = useRoute();
var useinfo = ref({});
onMounted(() => {
  useinfo.value = route.query;
  // console.log("编辑基本信息", useinfo);
});
var modify = () => {
  // console.log(obj.value[0].input);
  axios
    .post("/api/user/modify", {
      id: useinfo,
    })
    .then((res) => {
      console.log("creat", res);
    });
};
</script>

<style lang="scss" scoped>
.createemployee {
  > h3 {
    text-align: center;
    height: 100px;
    line-height: 60px;
  }
  > .box01 {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 14px;
      > &:nth-child(1) {
        width: 100px;
      }
      > &:nth-child(2) {
        color: #999;
      }
    }
  }
  > .box02 {
    > div {
      width: 100%;
      min-height: 50px;
      > span {
        display: inline-block;
        width: 100px;
        text-align: right;
      }
    }
    > .top0 {
      position: relative;
      > span {
        position: absolute;
        top: 0;
      }
      > .left {
        margin-left: 100px;
      }
    }
  }
  > .box03 {
    padding: 50px 0;
    text-align: center;
  }
}
</style>